import React, {Fragment, lazy, Suspense} from 'react';
import {changeTdk, goSystem, setScrollTop} from "../../assets/js/utils";
import hoc from './indexhoc';
import 'swiper/swiper-bundle.css';
import Css from '../../assets/css/senc/index.css'

const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));

const SencComponent=hoc((props)=>{
    console.log(props)
    return(
        <React.Fragment>
            <div className={Css['scen_banner']}></div>
            <div className={Css['scene']}>
                <div className={Css['senctitle']}>
                    应用场景广泛
                    <p>员工多样化的消费需求全覆盖</p>
                </div>
                <div className={Css['sencTabSmall']+' swiper-container'} id="thumbs">
                    <div className="swiper-wrapper">
                        {
                            props.aSenc.aSencSmall!==undefined?
                                props.aSenc.aSencSmall.map((item,index)=>{
                                    return(
                                        <div className={Css['sencTabSmallSlide']+' swiper-slide'} key={index}>
                                            {item.title}
                                        </div>
                                    )
                                })
                                :''
                        }
                    </div>
                </div>
                <div className={Css['sencTabBig']+' swiper-container'} id="gallery">
                    <div className="swiper-wrapper">
                        {
                            props.aSenc.aSencBig!==undefined?
                                    props.aSenc.aSencBig.map((item,index)=>{
                                        return(
                                            <div className={Css['sencTabBigSlide']+' swiper-slide'} key={index}>
                                                <div className={Css['sencTabBigSlideImg']}>
                                                    <img data-src={item.img} className="swiper-lazy" alt={''}/>
                                                    <div className={Css['activeLoading']}></div>
                                                </div>
                                            </div>
                                        )
                                    })
                                :""
                        }
                    </div>
                </div>

            </div>
            <div className={Css['senctitle']}>
                一站统筹更省钱
                <p >便捷高效的福利管理与实施</p>
            </div>
            <div className={Css['man_cen']}>
                <ul>
                    {
                        props.aManCen.length>0?
                            props.aManCen.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <p><i className={item.icn}></i></p>
                                        <span dangerouslySetInnerHTML={{__html:item.list}}></span>
                                    </li>
                                )
                            })
                            :''
                    }
                </ul>
            </div>
            <div className={Css['oper']}>

                <div className={Css['senctitle']}>
                    省心便捷易操作
                    <p >一站式移动员工服务平台</p>
                </div>

                <div className={Css['oper_cen']}>
                    <img src="//www.guanaitong.com/images/loading.gif" data-echo={require('../../assets/images/senc/scen10.png')} alt={''}/>
                    <p>员工使用简单，给到App极速体验，后台数据一目了然，方便HR管理查看。</p>
                </div>
            </div>
            <div className={Css['senctitle']}>
                高效合作
                <p >HR省心省事 员工便捷操作</p>
            </div>
            <div className={Css['coo']}>
                <ul>
                    <li>企业合作流程</li>
                    <li>双方签署合同，关爱通为企业开<br/>设平台、配置服务
                    </li>
                    <li>企业向员工发放账号、<br/>
                        密码，设置额度</li>
                    <li>企业与关爱通定期结算</li>
                </ul>
                <ul>
                    <li>员工使用流程</li>
                    <li>下载给到App</li>
                    <li>使用账号、密码登录</li>
                    <li>选择消费通道，使用员工午餐<br/>
                        /员工交通/教育培训额度支付</li>
                </ul>
            </div>
            <div className={Css['scen_title']}>
                <div className={Css['scen_title_btn']} id="scen_swt" onClick={props.goPages.bind(this,'//kht.zoosnet.net/LR/Chatpre.aspx?id=KHT94039533&lng=cn')}>即刻开启服务</div>
            </div>
        </React.Fragment>
    )
})

class senc extends React.Component{
    constructor(){
        super();
        this.state={
            title:'员工午餐交通培训-中智关爱通',
            description:'企业午餐解决方案,员工交通补贴方案,员工教育培训方案',
            keywords:'关爱通一站统筹企业午餐解决方案,员工交通补贴方案和员工教育培训方案,以积分发放形式满足全体员工个性化需求,控制企业总体成本解决企业成本管理和员工满意度的矛盾',
            aSenc:{},
            aManCen:[]
        }
    }
    componentDidMount(){
        this.goSystem();
        setTimeout(()=>{
            this.getSencData();
            this.getAManCenData();
        },100)
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    //获取应用场景
    getSencData(){
        let temASenc={
            aSencSmall:[
                {title:'员工午餐'},
                {title:'员工交通'},
                {title:'员工通讯'}
            ],
            aSencBig:[
                {img:require('../../assets/images/senc/scen3.png')},
                {img:require('../../assets/images/senc/scen2.png')},
                {img:require('../../assets/images/senc/scen1.png')}
            ]
        };
        this.setState({aSenc:temASenc})
    }
    //获取优势数据
    getAManCenData(){
        let temaManCen=[
            {
                icn:'e609',
                list:'企业统一发放，关爱通定期<br />结算并提供数据报告'
            },
            {
                icn:'e757',
                list:'计入福利/教育培训科目<br />节约企业成本'
            },
            {
                icn:'e616',
                list:'可兼容原有供应商<br />快速部署'
            },
            {
                icn:'e608',
                list:'形式与实质匹配<br />符合国家相关法规'
            },
            {
                icn:'e622',
                list:'先消费后结算<br />降低资金风险'
            }
        ];
        this.setState({aManCen:temaManCen})
    }
    //跳转平台
    goSystem(){
        goSystem(this.props,'senc')
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }
    render(){
        let newProps={
            aSenc:this.state.aSenc,
            aManCen:this.state.aManCen
        }
        return(
            <React.Fragment>
                <Fragment>
                    <Suspense　fallback={<div className={'loadWidth'}></div>} >
                        {/*导航*/}
                        <Nav props={this.props}></Nav>
                        {/*导航*/}
                        {/*右导航*/}
                        <RNav props={this.props}></RNav>
                        {/*右导航*/}
                    </Suspense >
                    <SencComponent {...this.props} {...newProps}></SencComponent>
                    <Suspense　fallback={<React.Fragment/>} >
                        {/*foot*/}
                        <Foot  props={this.props}></Foot>
                        {/*foot*/}
                    </Suspense>
                </Fragment>
            </React.Fragment>
        )
    }
}
export default senc